<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false" %>
<%-- 引入JSTL标签库 --%>
<%--<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>员工信息列表</title>
    <%--引入外部jQuery文件--%>
    <script src="/js/jquery-3.3.1.js"></script>
    <script>
        //添加文本就绪函数
        $(function (){
            doGetAllEmp();
        });
        //点击删除超链接，实现删除功能
        function deleteEmployee(val){
            //提示用户确认删除
            if(confirm("确定要删除id为【"+$(val).parent().parent().find("td:first").text()+"】记录吗?")){//表示选择的是确定
                //发送请求
                $.ajax({
                    url:"employee/"+$(val).parent().parent().find("td:first").text(),
                    type:"POST",
                    data:{_method:"DELETE"},
                    success:function (data){
                        alert("删除成功");
                        // console.log(data);
                        // doGetAllEmp();
                        //重新刷新页面数据
                        // location.href="http://localhost:8080/employee";
                        location.reload();
                        // location=location
                        // window.location.reload();
                    }
                });
            }
        }
        //处理查询所有员工信息的数据
        function doGetAllEmp(){
            //接收后端controller中响应的数据
            var items='${employeeList}';
            //console.log(items);
            //将json数据转换为JS对象
            var jsObj = JSON.parse(items);
            //console.log(jsObj);
            //遍历数据，动态创建表格的行和列
            if(jsObj.length>=0){//遍历查询所有的记录
                $.each(jsObj,function (index,value){
                    //console.log(index+" "+value)
                    //1.获取tbody对象
                    var tBody = $("#dataTable");
                    //2.构建tr对象
                    var tr= $("<tr></tr>");
                    //3.构建td对象
                    var tds=doCreateTds(value);
                    //4.将tbs追加到tr中
                    tr.append(tds);
                    //5.将tr追加到tbody中
                    tBody.append(tr);
                });
            }else{//遍历根据条件查询的记录
                //1.获取tbody对象
                var tBody = $("#dataTable");
                //2.构建tr对象
                var tr= $("<tr></tr>");
                //3.构建td对象
                var objMap = new Map(Object.entries(jsObj));
                //console.log(objMap);
                var tds="<td>"+objMap.get('id')+"</td>"+
                    "<td>"+objMap.get('name')+"</td>"+
                    "<td>"+objMap.get('gender')+"</td>"+
                    "<td>"+objMap.get('email')+"</td>"+
                    "<td><a onclick='deleteEmployee(this)' href='javascript:void(0);"+objMap.get('id')+"'>删除</a>"+
                    "|&nbsp;<a href='employee/"+objMap.get('id')+"'>修改</a></td>";
                //4.将tbs追加到tr中
                tr.append(tds);
                //5.将tr追加到tbody中
                tBody.append(tr);
            }
        };
        function doCreateTds(value){
            var tds=
                "<td>"+value.id+"</td>"+
                "<td>"+value.name+"</td>"+
                "<td>"+value.gender+"</td>"+
                "<td>"+value.email+"</td>"+
                "<td><a onclick='deleteEmployee(this)' href='javascript:void(0);"+value.id+"'>删除</a>"+
                "|&nbsp;<a href='employee/"+value.id+"'>修改</a></td>";
            return tds;
        }
    </script>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" style="text-align: center;" id="dataTable">
    <tr>
        <th colspan="5">员工信息</th>
    </tr>
    <tr>
        <th>员工编号</th>
        <th>员工姓名</th>
        <th>员工性别</th>
        <th>公司邮箱</th>
        <th>操作(<a href="toAdd">add</a>)</th>
    </tr>
    <%--    <c:forEach items="${employeeList}" var="list" varStatus="status">--%>
    <%--        <tr>--%>
    <%--            <td>${list.id}</td>--%>
    <%--            <td>${list.name}</td>--%>
    <%--            <td>${list.gender}</td>--%>
    <%--            <td>${list.email}</td>--%>
    <%--            <td>--%>
    <%--            <a href="deleteEmployee?id=${list.id}">删除</a>--%>
    <%--                &nbsp;|&nbsp;--%>
    <%--            <a href="updateEmployee?id=${list.id}">修改</a>--%>
    <%--            </td>--%>
    <%--        </tr>--%>
    <%--    </c:forEach>--%>
</table>
</body>
</html>
